<template>
  <div class="container">
    <van-row style="text-align: center;">
      <van-image round width="5rem" height="5rem" :src="imgSrc" />
    </van-row>
    <van-form @submit="register">
      <van-row style="text-align: center">
        <!-- <h2 style="color: #898989; letter-spacing: 5px;">用户注册</h2> -->
      </van-row>
      <van-field
        v-model="userForm.username"
        name="用户名"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="userForm.name"
        name="姓名"
        label="姓名"
        placeholder="请输入姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="userForm.number"
        name="学号"
        label="学号"
        placeholder="请输入学号"
        :rules="[{ required: true, message: '请填写学号' }]"
      />
      <van-field
        v-model="userForm.telephone"
        name="手机号"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '请填写手机号' },
      ]"
      />
      <van-field
        v-model="userForm.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        readonly
        clickable
        name="college"
        :value="userForm.college"
        label="学院"
        placeholder="点击选择学院"
        @click="collegePicker = true"
      />
      <van-popup v-model="collegePicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="collegeColumns"
          @confirm="onConfirm"
          @cancel="collegePicker = false"
        />
      </van-popup>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">注册</van-button>
      </div>
      <van-row style="text-align: right; padding: 0 20px;">
        已经注册？点此
        <span style="color: blue" @click="toLogin">登录</span>
      </van-row>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userForm: {
        username: "",
        name: "",
        number: "",
        telephone: "",
        password: "",
        college: "",
        role: "normal"
      },
      imgSrc: require("@/assets/logo.png"),
      collegeColumns: [
        "软件学院",
        "经管学院",
        "外国语学院",
        "国际学院",
        "土建学院"
      ],
      collegePicker: false
    };
  },
  methods: {
    onConfirm(value) {
      this.userForm.college = value;
      this.collegePicker = false;
    },
    register() {
      this.$api
        .post("/api/users/register", this.userForm)
        .then(res => {
          // 注册成功
          this.$message({
            message: "注册成功！",
            type: "success"
          });
          this.$router.push("/login");
        })
        .catch(err => {
          this.$message({
            message: err,
            type: "danger"
          });
        });
    },
    toLogin() {
      this.$router.push({ name: "login" });
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
</style>